<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>英文对话翻译</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        #container {
            max-width: 600px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #inputArea {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        #outputArea {
            border: 1px solid #ddd;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
            min-height: 100px;
            background-color: #f9f9f9;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div id="container">
    <h1>英文对话翻译</h1>
    <textarea id="inputArea" placeholder="请输入英文..."></textarea>
    <button onclick="translateAndReply()">提交</button>
    <div id="outputArea"></div>  <div id="outputArea2"></div>
</div>

<script>
    let op1='';
    let outputArea = document.getElementById('outputArea');let outputArea2 = document.getElementById('outputArea2');
    async function translateAndReply() {
        const inputText = document.getElementById('inputArea').value;
        if (inputText.trim() === '') {
            alert('请输入英文！');
            return;
        }

        // 调用GPT接口获取回复
        const gptResponse = await fetch('/test/vivogpt?prompt='+ encodeURIComponent(inputText),)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应异常');
                }
                return response.json();
            }).then(data => {
                op1=data.data.content;
                document.getElementById('outputArea').innerHTML =data.data.content
            })
            .catch(error => {
                console.error('错误:', error);
                // 处理错误情况，例如给用户一个友好的提示
            });
        // 调用翻译接口将回复翻译为中文
        const translationResponse =
            await fetch('/test/translation?prompt='+encodeURIComponent(op1),)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应异常');
                    }
                    return response.json();
                }).then(data => {
                    document.getElementById('outputArea2').innerHTML = data.data.translation
                })
                .catch(error => {
                    console.error('错误:', error);
                    // 处理错误情况，例如给用户一个友好的提示
                });
        // 显示回复
    }
</script>
</body>
</html>
